<!-- 温度计 -->
<template>
  <div class="item-info">
    <div class="item-info-left">
      <div :id="itemData.echartsName" class="echarts"/>
      <span>参考值 0~70℃</span>
    </div>
    <div class="item-info-right">
      <div class="title">
        <span>{{ itemData.name }}</span>
        <div v-if="!itemData.isFault" class="title-right-fault">
          <i class="icon-point"/>故障
        </div>
        <!-- <div v-else-if="itemData.isFault === '闭合'" class="title-right-fault">
          <i class="icon-point"/>闭合
        </div> -->
        <div v-else class="title-right-fault">
          <ElectricityQuantity :data="dataValue" :is-online="itemData.isFault"/>
          <Battery :data="dataValue1" :is-online="itemData.isFault"/>
        </div>
      </div>
      <ul>
        <li class="position"><i :style="{backgroundImage:'url(' + firePumpHouse + ')'}"/>{{ itemData.place }}</li>
        <li class="firePumpHouse"><i :style="{backgroundImage:'url(' + position + ')'}"/>{{ itemData.address }}</li>
        <li class="time"><i :style="{backgroundImage:'url(' + time + ')'}"/>{{ itemData.date }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import firePumpHouse from '@/assets/internetData/firePumpHouse.png'
import position from '@/assets/internetData/position.png'
import time from '@/assets/internetData/time.png'
import echarts from 'echarts'
import ElectricityQuantity from '@/components/ElectricityQuantity'
import Battery from '@/components/Battery'
export default {
  components: {
    ElectricityQuantity,
    Battery
  },
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      firePumpHouse,
      position,
      time,
      dataValue: 1, // 信号值0-5
      dataValue1: 100// 电池百分比
    }
  },
  computed: {
  },
  created() {
    const that = this
    this.$nextTick(function() {
      var dashboard = echarts.init(document.getElementById(that.itemData.echartsName))
      dashboard.setOption({
        grid: {
          left: '21%',
          bottom: '24%',
          right: '35%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          show: true,
          showDelay: 0,
          hideDelay: 0,
          position: 'top',
          transitionDuration: 0,
          backgroundColor: '#FFF',
          textStyle: {
            color: '#FFFFFF'
          },
          formatter: function(params) {
            const res = `<div style="width:26px;height:20px;line-height:20px;position:absolute;right:-52px;top:5px;background-color:` + that.itemData.echartsColor + `;"><div style="width:100%;height: 20px;position:relative;font-size:12px;texe-align:center;"><span class="icon-left" style="position: absolute;left: -20px;top: 0px;border-width: 10px;border-style: solid;border-color: transparent ` + that.itemData.echartsColor + ` transparent transparent;"></span><div class="value">${params.value}</div></div></div>`
            return res
          },
          borderRadius: 0,
          borderWidth: 0
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [{
          type: 'value',
          max: 200,
          min: 0,
          offset: '0',
          interval: 50,
          z: 2,
          axisLine: {
            lineStyle: {
              color: '#74645F',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              opacity: 0
            }
          },
          axisTick: {
            inside: true,
            length: 20
          },
          minorTick: {
            show: true,
            length: 10
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            fontWeight: 'bold',
            margin: 10
          }
        }],
        series: [{
          name: '',
          type: 'bar',
          barWidth: 40,
          silent: true,
          z: 1,
          itemStyle: {
            normal: {
              color: '#fff',
              barBorderRadius: [3, 3, 3, 3],
              borderColor: that.itemData.echartsColor,
              borderWidth: '1',
              shadowColor: 'RGBA(208, 205, 219, 1)',
              shadowBlur: 4
            }
          },
          barGap: '-100%',
          data: [200]
        },
        {
          name: '',
          type: 'bar',
          z: 1,
          barWidth: 40,
          itemStyle: {
            normal: {
              color: that.itemData.echartsColor,
              barBorderRadius: [0, 0, 3, 0]
            }
          },
          data: that.itemData.echartsData
        }]
      })
    })
  },
  methods: {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.item-info{
  display: inline-block;
  box-sizing: border-box;
  box-shadow:0px 0px 5px 3px rgba(243,243,243,1);
  border: 1px solid rgba(243,243,243,1);
  margin: 0 10px;
  margin-top: 50px;
  border-radius:5px;
  .item-info-left{
    float: left;
    width: 160px;
    height: 220px;
    background:rgba(249,249,249,1);
    position:relative;
    .echarts{
      width: 100%;
      height: 200px;
    }
    span{
      display: block;
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 30px;
      left: 0;
      font-size: 14px;
    }
  }
  .item-info-right{
    float: left;
    width: 210px;
    height: 220px;
    padding: 20px 0;
    .title{
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      span{
        display: block;
        float: left;
        font-weight: bold;
        font-size: 16px;
      }
      .title-right-fault{
        float: right;
        font-size: 12px;
        i.icon-point{
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 3px;
          background-color: #EC0C0C;
        }
      }
    }
    >ul{
      overflow: hidden;
      padding: 10px 15px;
      box-sizing: border-box;
      li{
        height: 40px;
        line-height: 40px;
        color: #3D4241;
        font-size: 13px;
        position: relative;
        height: 40px;
        line-height: 40px;
        color: #373131;
        position: relative;
        padding-left: 24px;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        i{
          position: absolute;
          display: block;
          background-size: 100%;
          color: #36B4F7;
          background-repeat: no-repeat;
        }
      }
      .time i{
        width:11px;
        height:11px;
        left: 2px;
        top: 14px;
      }
      .position i{
        width:12px;
        height:18px;
        left: 2px;
        top: 14px;
      }
      .firePumpHouse i{
        width:13px;
        height:15px;
        left: 1px;
        top: 12px;
      }
    }
  }
  // .title{
  //   width: 100%;
  //   height: 40px;
  //   font-size: 14px;
  //   padding: 10px 15px;
  //   box-sizing: border-box;
  //   span{
  //     float: left;
  //     font-size: 14px;
  //     font-weight: bold;
  //   }
  //   .title-right-fault{
  //     float: right;
  //     color: #69A139;
  //     i{
  //       display: inline-block;
  //       width: 10px;
  //       height: 10px;
  //       border-radius: 50%;
  //       margin-right: 5px;
  //       background-color: #EC0C0C;
  //     }
  //   }
  // }
}
</style>
